@CHARSET "UTF-8";

/* estilo para todo el sitio */
*{
	padding:0;
	margin:0;
}

/* Fuente de firefox */
@font-face{
	font-family: 'FiraOpenType';
	src: url(font/FiraSansOT-Light.otf);
}


/* estilo para el contenedor de todo el sitio web */
.principal{
	width: 480px;
	height: 800px;
	position: relative;
	background: url('img/fondo.png') bottom center no-repeat #2C393B;
}


/* estilo para el header */
header{
	height: 5rem;
}


/* estilo para el menu de navegacion */
#imagenMenu{
	float:left;
	height:5rem;
	width: 5rem;
	border-right: 1px solid rgb(205,103,35);
	background-image: url('img/menu.png'), -moz-linear-gradient(center bottom, rgb(187, 72, 45), rgb(205,103,35) );
	background-repeat: no-repeat;
	background-position: center;
}

#tituloMenu{
	float: left;
	height: 5rem;
	width: 19.4rem;
	border-right: 1px solid rgb(187,72,45);
	border-left: 1px solid rgb(205,103,35);
}

#opcionesMenu{
	height: 5rem;
	width: 5.3rem;
	float: left;
	border-left: 1px solid rgb(205,103,35);
	background-image: url('img/opciones.png'), -moz-linear-gradient(center bottom, rgb(187, 72, 45), rgb(205,103,35) );
	background-repeat: no-repeat;
	background-position:center;
}


/* estilo para el titulo */

.titulo{
	font-family: 'FiraOpenType';
	text-align : left;
	font-size: 1.6rem;
	color: #ffffff;
	background-image: -moz-linear-gradient(center bottom, rgb(187, 72, 45), rgb(205,103,35) );
	line-height: 5rem;
	margin-left: 0 rem;
}


/* estilo para el menu y los items */

#menu{
	position: relative;
	display: none;
}

#opcionesMenu:hover > #menu{
	display: block;
}

ul{
	width: 20rem;
	list-style-type: none;
	float: right;
	margin-top: 5.03rem;
	border-radius: 0 0 3px 3px;
}

ul li{
	line-height: 3rem;
	font-family: 'FiraOpenType';
	font-weight: 600;
	color: #fff;
	background-color: #333333;
	padding-left: 1.5rem;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #000;

}

ul li:hover{
	background-color: rgba(0,0,0, 0.2);
	color: #000;
}


